@page "/templates/wiki"
@page "/boilerplate/wiki"
@inherits AppComponentBase

<PageOutlet Url="templates/wiki"
            Title="Wiki - Templates"
            Description="Learn about how to learn more about bit Boilerplate using our Wiki" />

<div class="page-container">
    <BitText Typography="BitTypography.H3" Gutter>Wiki</BitText>

    <section class="section-card">

        <BitText Typography="BitTypography.H5" Gutter>bit Boilerplate built-in wiki</BitText>

        <div class="section-card-txt">
            Each project created from bit Boilerplate includes comprehensive documentation in markdown format.
            These files are located in the <u><i><b>.docs</b></i></u> folder of your project and cover all aspects of the boilerplate architecture, features, and best practices.
            <br />
            <br />
            You can read these markdown files directly in your IDE (<b>Visual Studio Code</b> is recommended) or browse them on GitHub after pushing your project to a repository.
        </div>

        <div class="docs-image-scroll">
            <img class="docs-image" src="images/templates/wiki.webp" />
        </div>

        <br />
        <br />
        <BitText Typography="BitTypography.H5" Gutter>Wiki's Comprehensive Stages:</BitText>
        <br />

        The Wiki guide covers your entire project architecture across 25 detailed stages. Each stage provides real examples from your own project:

        <div id="ef-core" style="margin-top: 1rem;">
            <strong>Stage 1: Entity Framework Core</strong>
            <p>Learn about DbContext, entity models, entity type configurations, and migrations. Understand nullable reference types in EF Core relationships and client-side offline database support.</p>
        </div>

        <div id="dtos-mappers" style="margin-top: 1rem;">
            <strong>Stage 2: DTOs, Mappers, and Mapperly</strong>
            <p>Explore Data Transfer Objects, `AppJsonContext`, and how Mapperly simplifies object mapping. Learn the difference between Project() and Map() methods, and how Patch() updates client-side objects.</p>
        </div>

        <div id="api-odata" style="margin-top: 1rem;">
            <strong>Stage 3: API Controllers and OData</strong>
            <p>Understand controller architecture, [AutoInject] attribute, and OData query support ($filter, $top, $skip, $orderby). Learn about PagedResult for total counts, data security, and optimized performance patterns.</p>
        </div>

        <div id="background-jobs" style="margin-top: 1rem;">
            <strong>Stage 4: Background Jobs and CancellationToken Management</strong>
            <p>Discover automatic request cancellation, CancellationToken usage, NavigationLock for critical operations, and Hangfire for reliable background job processing with persistence.</p>
        </div>

        <div id="localization" style="margin-top: 1rem;">
            <strong>Stage 5: Localization and Multi-language Support</strong>
            <p>Master resource files (resx), `DtoResourceType` attribute, `AppDataAnnotationsValidator`, IStringLocalizer usage, and the `bit-resx` tool for managing translations.</p>
        </div>

        <div id="exception-handling" style="margin-top: 1rem;">
            <strong>Stage 6: Exception Handling and Error Management</strong>
            <p>Learn about Known vs Unknown exceptions, safe exception throwing, `WithData()` and `WithExtensionData()` methods, automatic exception handling in Blazor, and `WrapHandled()` for event handlers.</p>
        </div>

        <div id="identity-auth" style="margin-top: 1rem;">
            <strong>Stage 7: ASP.NET Core Identity / Authentication & Authorization</strong>
            <p>Comprehensive coverage of JWT tokens (access/refresh), session management, SSO integration (Google, GitHub, Azure AD, etc.), role-based and policy-based authorization, and identity configuration.</p>
        </div>

        <div id="components-styling" style="margin-top: 1rem;">
            <strong>Stage 8: Blazor Pages, Components, Styling &amp; Navigation</strong>
            <p>Understand the three-file structure (.razor, .razor.cs, .razor.scss), isolated component styles, global styles, ::deep selector, Bit.BlazorUI components, and navigation with `PageUrls`.</p>
        </div>

        <div id="dependency-injection" style="margin-top: 1rem;">
            <strong>Stage 9: Dependency Injection &amp; Service Registration</strong>
            <p>Explore service registration patterns across different projects, `AddSessioned` method for session-scoped services, and appropriate service lifetimes (Singleton, Scoped, Transient, `Sessioned`).</p>
        </div>

        <div id="configuration" style="margin-top: 1rem;">
            <strong>Stage 10: Configuration (appsettings.json)</strong>
            <p>Learn about configuration hierarchy across projects, appsettings.{environment}.json files, configuration priority, and how to use *__Comment for JSON comments.</p>
        </div>

        <div id="typescript" style="margin-top: 1rem;">
            <strong>Stage 11: TypeScript, Build Process &amp; JavaScript Interop</strong>
            <p>Understand TypeScript integration, MSBuild targets for JavaScript compilation, `IJSRuntimeExtensions` for C#-to-JS calls, and how to add npm packages with type definitions.</p>
        </div>

        <div id="blazor-modes" style="margin-top: 1rem;">
            <strong>Stage 12: Blazor Modes, PreRendering &amp; PWA</strong>
            <p>Explore Blazor Server, WebAssembly, and Auto modes, pre-rendering configuration for SEO and performance, PWA capabilities, service workers, and `IPrerenderStateService`.</p>
        </div>

        <div id="force-update" style="margin-top: 1rem;">
            <strong>Stage 13: Force Update System</strong>
            <p>Learn how `ForceUpdateMiddleware` validates app versions on every request, supports platform-specific update behaviors (auto-update for web/Windows, store redirect for mobile), and ensures all users run supported versions.</p>
        </div>

        <div id="response-caching" style="margin-top: 1rem;">
            <strong>Stage 14: Response Caching System</strong>
            <p>Master multi-layer caching: client-side memory cache, browser HTTP cache, CDN edge cache, and ASP.NET Core Output Cache. Learn about `AppResponseCache` attribute, cache purging with `ResponseCacheService`, and optimizing performance.</p>
        </div>

        <div id="logging" style="margin-top: 1rem;">
            <strong>Stage 15: Logging, OpenTelemetry and Health Checks</strong>
            <p>Understand ILogger for logging, `ActivitySource` and `Meter` for tracking operations, in-app Diagnostic Modal, integration with Sentry and Azure App Insights, Aspire Dashboard, and built-in health checks.</p>
        </div>

        <div id="cicd" style="margin-top: 1rem;">
            <strong>Stage 16: CI/CD Pipeline and Environments</strong>
            <p>Explore workflow files, environment configuration (Development, Staging, Production), build and deployment pipelines for client platforms, and best practices for secure backend deployment.</p>
        </div>

        <div id="testing" style="margin-top: 1rem;">
            <strong>Stage 17: Automated Testing (Unitigration Tests)</strong>
            <p>Learn about the Unitigration Test approach that combines the benefits of Unit Tests and Integration Tests, UI tests with real server behavior, and flexible test architecture.</p>
        </div>

        <div id="prompts" style="margin-top: 1rem;">
            <strong>Stage 18: Other Available Prompt Templates</strong>
            <p>Discover additional specialized prompt templates available in the .github/prompts/ directory for specific development tasks and scenarios.</p>
        </div>

        <div id="misc-files" style="margin-top: 1rem;">
            <strong>Stage 19: Project Miscellaneous Files</strong>
            <p>Review important configuration files: Clean scripts, global.json, vs-spell.dic, settings.VisualStudio.json, mcp.json, Directory.Build.props, Directory.Packages.props, and .vsconfig.</p>
        </div>

        <div id="aspire" style="margin-top: 1rem;">
            <strong>Stage 20: .NET Aspire</strong>
            <p>Understand .NET Aspire benefits for development (dashboard monitoring) and deployment (Azure, Docker Compose, Kubernetes). Learn database persistence configuration and Linux testing with Dev Containers.</p>
        </div>

        <div id="maui-hybrid" style="margin-top: 1rem;">
            <strong>Stage 21: .NET MAUI / Blazor Hybrid</strong>
            <p>Explore native platform capabilities on Android, iOS, macOS, and Windows. Learn about Deep Links/Universal Links, `ApplicationVersion` for app stores, Windows project advantages, and WebView considerations.</p>
        </div>

        <div id="messaging" style="margin-top: 1rem;">
            <strong>Stage 22: Messaging</strong>
            <p>Master in-app messaging with `PubSubService`, JavaScript-to-C# communication with `AppJsBridge`, real-time server-to-client messaging with SignalR, and push notifications with deep linking.</p>
        </div>

        <div id="diagnostic" style="margin-top: 1rem;">
            <strong>Stage 23: Diagnostic Modal</strong>
            <p>Explore the powerful in-app diagnostic tools, including browser DevTools that work on mobile devices and real-time log viewing capabilities.</p>
        </div>

        <div id="webauthn" style="margin-top: 1rem;">
            <strong>Stage 24: WebAuthn and Passwordless Authentication (Advanced)</strong>
            <p>Learn about biometric authentication (fingerprint, Face ID, PIN) that's more secure than native implementations, cross-platform support.</p>
        </div>

        <div id="vector-embeddings" style="margin-top: 1rem;">
            <strong>Stage 25: RAG / Semantic Search with Vector Embeddings (Advanced)</strong>
            <p>Understand vector embeddings for semantic search, cross-language search capabilities, embedding models (OpenAI, Azure, Hugging Face), and how to implement RAG (Retrieval-Augmented Generation) patterns.</p>
        </div>

        <br />
    </section>

    <section class="section-card" id="ai-powered-wiki">
        <BitText Typography="BitTypography.H5" Gutter>AI-Powered Wiki</BitText>
        <div class="section-card-txt">
            You can also visit <a href="https://wiki.bitplatform.dev" target="_blank">wiki.bitplatform.dev</a> anytime to ask questions about bit Boilerplate and the entire bitplatform ecosystem.
            <br /><br />
            To enhance the understanding of our Open Source Project Repository, all documentation is maintained within a single mono repo. This approach ensures that the AI Wiki can cohesively analyze the entire set of documents, README files, in-code comments, and source code to provide comprehensive insights when queried.
            <br /><br />
            Here are some example questions that can be answered by <a href="https://wiki.bitplatform.dev" target="_blank">wiki.bitplatform.dev</a>:
            <ul>
                <li>What is the optimal way to load page data using <b>StateHasChanged</b> in conjunction with a <b>Skeleton UI</b> or <b>Shimmer</b>? <a title="What is the optimal way to load page data using StateHasChanged in conjunction with a Skeleton UI or Shimmer?" href="https://wiki.bitplatform.dev/search/explain-how-skeletonui-shimmer_aefa5fb9-a326-4685-aa2d-28036661d5d5" target="_blank">Link</a></li>
                <br />
                <li>How can I <b>remove google reCAPTCHA</b> from a project I created from bit Boilerplate? <a title="How can I remove google reCAPTCHA from a project I created from bit Boilerplate?" href="https://wiki.bitplatform.dev/search/how-can-i-remove-google-recapt_d3000cc1-b8da-4c18-9907-9030b81b0e01" target="_blank">Link</a></li>
                <br />
                <li>What is the <b>difference between Patch and Map</b>, and what is their relationship with Entity Framework Core and Blazor change tracking? <a title="What is the difference between Patch and Map, and what is their relationship with Entity Framework Core and Blazor change tracking?" href="https://wiki.bitplatform.dev/search/describe-whats-the-difference_1cd6804f-94ca-4e2c-abc4-376b6a96a69e" target="_blank">Link</a></li>
                <br />
                <li>How can I implement a <b>Grid System</b> and layout using <b>BitGrid</b> and <b>BitStack</b> components, especially if I'm familiar with the Bootstrap grid system? <a title="How can I implement a Grid System and layout using BitGrid and BitStack components, especially if I'm familiar with the Bootstrap grid system?" href="https://wiki.bitplatform.dev/search/how-can-i-implement-a-grid-sys_41f89d5c-c284-442a-9d8f-0314d1a10b2e" target="_blank">Link</a></li>
                <br />
                <li>How does a <b>refresh token</b> function in a Boilerplate project template? <a title="How does a refresh token function in a Boilerplate project template?" href="https://wiki.bitplatform.dev/search/how-does-a-refresh-token-funct_5d74ff31-5571-4c92-bc66-d9b2a139dcab" target="_blank">Link</a></li>
                <br />
                <li>How does <b>passwordless authentication</b> work in Boilerplate, particularly in Blazor Hybrid versions of the app, given that this feature is browser-only? <a title="How does passwordless authentication work in Boilerplate, particularly in Blazor Hybrid versions of the app, given that this feature is browser-only?" href="https://wiki.bitplatform.dev/search/how-does-passwordless-authenti_3ca35e20-979a-4a1b-a49d-b1091e23720d" target="_blank">Link</a></li>
                <br />
                <li>How does using <b>embeddings</b> with the PostgreSQL <b>vector</b> extension enable product search functionality via LINQ and Entity Framework Core? <a title="How does using embeddings with the PostgreSQL vector extension enable product search functionality via LINQ and Entity Framework Core?" href="https://wiki.bitplatform.dev/search/describe-how-product-embedding_8f6373c9-aa52-4031-94c1-d644aa2f7a53" target="_blank">Link</a></li>
            </ul>
        </div>
    </section>
</div>

<NavigationButtons Prev="Run project" PrevUrl="/templates/run-project" />